<template>
  <div>
    <el-card class="operator-button-card">
      <template #header>
        <div class="flex justify-between items-center">
          <h2 class="operator-button-label">{{ $t('operator.fly_key_config') }}</h2>
          <div>
            <el-button
              v-if="isAuth('10400202.MANAGE')"
              type="primary"
              size="small"
              :loading="flyKeyLoading"
              @click="saveDefaultFlyKeyConfigHandle"
              >{{ $t('common.restore_default') }}
            </el-button>
            <el-button
              v-if="isAuth('10400202.MANAGE')"
              type="primary"
              size="small"
              :loading="flyKeyLoading"
              @click="saveFlyKeyConfigHandle"
              >{{ $t('common.save') }}
            </el-button>
          </div>
        </div></template
      >

      <el-form
        ref="dataForm"
        :model="configForm"
        label-width="250px"
        size="small"
      >
        <el-form-item :label="$t('operator.fly_key_config_node') + ':'">
          <el-select
            v-model="configForm.code"
            prop="code"
            @change="configSelect"
            style="width: 400px"
          >
            <el-option
              v-for="item in configMap"
              :key="item.code"
              :value="item.code"
              :label="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('operator.fly_key_config_address') + ':'"
          prop="address"
          width="100%"
        >
          <div>
            <el-input
              v-model="configForm.address"
              placeholder="key"
              maxlength="128"
              show-word-limit
              disabled
              style="width: 400px"
              clearable
              @blur="() => (configForm.address = configForm.address.trim())"
            />
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {
  getFlyKeyConfigList,
  getOperatorFlyKeyConfig,
  saveOperatorFlyKeyConfig
} from '@/api/operator'
import { isAuth } from '@/utils'

export default {
  props: {
    operatorId: {
      require: true,
      type: String,
      default: null
    },
    operator: Object
  },
  data() {
    return {
      flyKeyLoading: false,
      configForm: {
        code: '',
        address: ''
      },
      configMap: []
    }
  },
  created() {
    this.configMap = this.getFlyKeyConfigList()
  },
  mounted() {
    this.initKey()
  },
  methods: {
    saveFlyKeyConfigHandle() {
      if (this.configForm.code === '') {
        this.$confirm(this.$t('operator.map_not_null'), this.$t('page.tip'), {
          confirmButtonText: this.$t('page.confirm'),
          cancelButtonText: this.$t('page.cancel'),
          type: 'warning'
        })
        return
      }
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.$confirm(this.$t('operator.save_cfg'), this.$t('page.tip'), {
            confirmButtonText: this.$t('page.confirm'),
            cancelButtonText: this.$t('page.cancel'),
            type: 'warning'
          })
            .then(() => {
              this.flyKeyLoading = true
              const flyKeyConfigBody = {}
              flyKeyConfigBody.operatorId = this.operatorId
              flyKeyConfigBody.paramValue = this.configForm.code
              saveOperatorFlyKeyConfig(flyKeyConfigBody)
                .then((data) => {
                  this.$message({
                    type: 'success',
                    message: this.$t('common.success')
                  })
                  this.flyKeyLoading = false
                })
                .catch((e) => {
                  this.$confirmError(e)
                  this.flyKeyLoading = false
                })
            })
            .catch(() => {})
        }
      })
    },
    saveDefaultFlyKeyConfigHandle() {
      this.$confirm(
        this.$t('operator.save_cfg_fly_key_default'),
        this.$t('page.tip'),
        {
          confirmButtonText: this.$t('page.confirm'),
          cancelButtonText: this.$t('page.cancel'),
          type: 'warning'
        }
      )
        .then(() => {
          this.flyKeyLoading = true
          const flyKeyConfigBody = {}
          flyKeyConfigBody.operatorId = this.operatorId
          flyKeyConfigBody.paramValue = ''
          saveOperatorFlyKeyConfig(flyKeyConfigBody)
            .then((data) => {
              this.$message({
                type: 'success',
                message: this.$t('common.success')
              })
              this.flyKeyLoading = false
              this.initKey()
            })
            .catch((e) => {
              this.$confirmError(e)
              this.flyKeyLoading = false
            })
        })
        .catch(() => {})
    },
    initKey() {
      getOperatorFlyKeyConfig(this.operatorId)
        .then((data) => {
          this.configForm.code = data.code
          this.configForm.address = data.address
          console.log(data.address)
          if (data.isDefault) {
            this.configForm.code = data.name
          }
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },
    getFlyKeyConfigList() {
      getFlyKeyConfigList()
        .then((data) => {
          this.configMap = data
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },
    configSelect(value) {
      console.log(value)
      this.configMap.forEach((item) => {
        if (item.code === value) {
          this.configForm.address = item.address
        }
      })
    },
    isAuth
  }
}
</script>

<style lang="scss" scoped>
.l-card {
  margin: 20px 36px;
}
</style>
